<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <script src="/static/jquery-1.8.0.min.js"></script>
  <link rel="stylesheet" href="../css/layui.css"  media="all">
</head>
<body>

<form class="layui-form" action="">
	<div class="layui-form-item">
		<label class="layui-form-label">账单备注</label>
		<div class="layui-input-block">
		  <input type="text" name="message" lay-verify="title" autocomplete="off" placeholder="账单详情" class="layui-input" id="message">
		</div>
	</div>
	<div class="layui-form-item" style="width: 100%">
		<label class="layui-form-label">付款人</label>
		<div class="layui-input-block">
		  <select name="draweeName" id="draweeName">
		    <option value="dhq">海权</option>
		    <option value="toshi" selected="">toshi</option>
		    <option value="lgh">贵豪</option>
		  </select>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
		  <label class="layui-form-label">付款金额</label>
		  <div class="layui-input-inline" style="width: 100px;">
		    <input type="text" name="amount" placeholder="￥" autocomplete="off" class="layui-input" id="amount" onchange="proportionChange()">
		  </div>
		</div>
	</div>
	<div>
	  <label class="layui-form-label">付款日期</label>
	  <div class="layui-input-inline">
        <input type="text" name="payTime" id="payTime" class="layui-input" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
	</div>
	<hr>
	<div >
		<label style="font-size:18px;margin-left: 35px;margin-top: 20px;">分摊金额</label>
	</div>
	<div style="margin-top: 10px;">
	<div style="float:left">
	  <label class="layui-form-label">海权</label>
	  <div class="layui-input-inline" style="width: 100px;">
	    <input type="text" id="dhqMoney" name="dhqMoney" placeholder="￥" class="layui-input"  oninput="value=value.replace(/[^\d.]/g,'')" disabled="disabled">
	  </div>
	</div>
	<div>
	  <label class="layui-form-label">比例%</label>
	  <div class="layui-input-inline" style="width: 100px;">
	    <input type="text" id="dhqProportion" name="dhqProportion" class="layui-input"  oninput="value=value.replace(/[^\d.]/g,'')" value="1" onchange="proportionChange()">
	  </div>
	</div>
	</div>
	<div style="margin-top: 10px;">
	  <div style="float:left">
		<label class="layui-form-label">toshi</label>
		<div class="layui-input-inline" style="width: 100px;">
			<input type="text" id="toshiMenoy" name="toshiMenoy" placeholder="￥" class="layui-input"  oninput="value=value.replace(/[^\d.]/g,'')"  disabled="disabled">
		</div>
	</div>
	<div>
		<label class="layui-form-label">比例%</label>
		<div class="layui-input-inline" style="width: 100px;">
			<input type="text" id="toshiProportion" name="toshiProportion" class="layui-input"  oninput="value=value.replace(/[^\d.]/g,'')" value="1" onchange="proportionChange()">
		</div>
	</div>
	</div>
	<div style="margin-top: 10px;">
	<div style="float:left">
		<label class="layui-form-label">贵豪</label>
		<div class="layui-input-inline" style="width: 100px;">
			<input type="text" id="lghMenoy" name="lghMenoy" placeholder="￥" class="layui-input" oninput="value=value.replace(/[^\d.]/g,'')"  disabled="disabled">
		</div>
	</div>
	  <div>
		<label class="layui-form-label">比例%</label>
		<div class="layui-input-inline" style="width: 100px;">
			<input type="text" id="lghProportion" name="lghProportion" class="layui-input"  oninput="value=value.replace(/[^\d.]/g,'')" value="1" onchange="proportionChange()">
		</div>
	</div>
	</div>
	<div class="layui-form-item" style="margin-top: 10px;">
		<div class="layui-input-block">
		  <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitContent">立即提交</button>
		</div>
	</div>
</form>
<script src="js/tool.js" charset="utf-8"></script>

<script src="../layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
var name = getParams('name');
$('#draweeName').val(name);
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
      

  //日期
  laydate.render({
    elem: '#payTime'
	,type: 'datetime'
  });
  
  //监听提交
  form.on('submit(submitContent)', function(data){
	console.log(data.field)
	var sendData = {};
	sendData["drawee"] = data.field.draweeName;
	sendData["message"] = data.field.message;
	sendData["amount"] = data.field.amount;
	var timeStr = data.field.payTime.replace(/-/g,'/'); 
	sendData["payTime"] = new Date(timeStr).getTime();
	var participants = [
		{"username":"lgh","proportion": Number(data.field.lghProportion)},
		{"username":"dhq","proportion": Number(data.field.dhqProportion)},
		{"username":"toshi","proportion": Number(data.field.toshiProportion)}
		];
	sendData["participants"] = participants;
	console.log(sendData);
    $.ajax({
		type: 'post',
		url: "/bills",
		data: JSON.stringify(sendData),
		contentType:"application/json",
		success: function(res){
			console.log(res);
			if(res.code == 0){
				layer.msg('创建账单成功',{time:1000});
				setTimeout(function(){
					close();
					parent.location.href = "personalreceivablebills.html?name=" + name;
				},500);
			}else{
				layer.msg('创建账单失败',{time:1000});
			}
		},
		dataType: "json"
	});
    return false;
  });
});
function close(){
	var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	parent.layer.close(index); 
}

function proportionChange(){
	var amount = Number($('#amount').val());
	var proportion = Number($('#lghProportion').val()) + Number($('#dhqProportion').val()) + Number($('#toshiProportion').val()); 
	$('#lghMenoy').val((amount * Number($('#lghProportion').val()) / proportion).toFixed(2));
	$('#dhqMoney').val((amount * Number($('#dhqProportion').val()) / proportion).toFixed(2));
	$('#toshiMenoy').val((amount * Number($('#toshiProportion').val()) / proportion).toFixed(2));
}


</script>
</body>
</html>